<template>
	<div class="pageSetting">
		<shyt-table
			ref="shytTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:toolbar-config="toolbarConfig"
			:pager-config="pageConfig"
			:edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }"
			@page-change="pageChange"
		>
			<template #orgUuid="{ row }">
				<span>{{ orgListFun(row.orgUuid) }}</span>
			</template>
			<template #whetherEnable="{ row }">
				<span>{{ whetherEnableObject[row.whetherEnable] }}</span>
			</template>
			<template #name="{ row }">
				<span>{{ row.itemName }}</span>
			</template>
			<template #code="{ row }">
				<span>{{ row.itemCode }}</span>
			</template>

			<template #toolbar_buttons>
				<el-input
					v-model="query"
					placeholder="请输入表单名称"
					size="small"
					style="width: 200px"
					clearable
					@keyup.enter.native="handlerSearch"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						@click="handlerSearch"
					/>
				</el-input>
				<el-button
					v-permission="['insert', 'handlerAddClick']"
					type="primary"
					size="small"
				>
					新增
				</el-button>
			</template>
			<template #edit="{ row }">
				<el-button type="text" size="small" @click="handlerAllot(row)">
					{{ row.type == '1' ? 'APP分配权限' : '分配权限' }}
				</el-button>
				<el-button type="text" size="small" @click="handlerEditRow(row)">
					编辑
				</el-button>
				<el-button type="text" size="small" @click="handlerDelRow(row)">
					删除
				</el-button>
			</template>
		</shyt-table>
		<addFormDialogVue
			:dialog-visible.sync="dialogVisible"
			:title="title"
			:type="dialogType"
			:form-type-options="formTypeOptions"
			:form-dialog.sync="formDialog"
			@submit="handlerSubmit"
			@editForm="handlerEditForm"
		></addFormDialogVue>
		<allotDialog
			:allot-dialog.sync="allotDialog"
			:allot-permission.sync="allotPermission"
			:allot-row="allotRow"
			:allot-checked="allotChecked"
			@handerConfirm="handerConfirm"
		></allotDialog>
	</div>
</template>

<script>
import {
	customerFormDeletes,
	getCustomerFormPageList,
	customerFormInset,
	customerFormUpdate,
} from '@/http/customerForm'
import { getSysDataDictList } from '@/http/dict'
import { assignPermissionsTree } from '@/http/api'
import { getFormAppMenuList } from '@/http/appMenu'
import addFormDialogVue from './components/addFormDialog.vue'
import allotDialog from './components/allotDialog.vue'
import { mapMutations, mapActions, mapGetters } from 'vuex'
// import { getOrgList } from '@/http/org'
export default {
	name: 'CustomerFormSetting',
	components: {
		addFormDialogVue,
		allotDialog,
	},
	data() {
		return {
			query: null,
			orgList: [],
			whetherEnableObject: { 0: '是', 1: '否' },
			page: 1,
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 0,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
			columns: [
				{
					field: 'formName',
					title: '表单名称',
				},
				// {
				// 	field: 'orgUuid',
				// 	title: '所属机构',
				// 	slots: { default: 'orgUuid' },
				// },
				{
					field: 'whetherEnable',
					title: '是否启用',
					slots: { default: 'whetherEnable' },
				},
				{
					field: 'code',
					title: 'HIS项目code',
					slots: { default: 'code' },
				},
				{
					field: 'name',
					title: 'HIS项目名称',
					slots: { default: 'name' },
				},
				{
					field: 'remarks',
					title: '备注',
				},
				{
					title: '操作',
					slots: { default: 'edit' },
				},
			],
			tableData: [],
			$table: null,
			allotDialog: false,
			dialogVisible: false,
			title: '',
			dialogType: 1, // 1新增 2编辑
			formDialog: {
				formJson: null,
				formFile: null,
				type: '0',
				formType: '0',
				whetherEnable: '0',
				remarks: null,
				formName: null,
			},
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			allotPermission: [],
			allotRow: {},
			allotChecked: [],
			allotDisable: [],
			formTypeOptions: [],
		}
	},
	computed: {
		...mapGetters(['addRoutes']),
	},
	created() {
		// this.getOrgList({})
	},
	mounted() {
		this.handlerSearch()
		this.getSysDataDictList()
		this.$table = this.$refs.shytTable.$refs.xTable
		// let Permission = this.$store.getters.addRoutes
		// console.log(this.$store.getters)
		// this.allotPermission = this.addAllot()
	},
	methods: {
		...mapMutations('common', ['CHANGE_CURFORMINFO']),
		...mapActions('common', ['ACTION_CHANGE_CURFORMINFO']),
		getSysDataDictList() {
			// this.formTypeOptions =
			getSysDataDictList({ type: 'RC_FORM_TYPE' }).then(({ data }) => {
				// console.log(res)
				if (data.head.code == 200) {
					this.formTypeOptions = data.data
				}
			})
		},
		getAppMenuList(row) {
			getFormAppMenuList({ menuClassType: '1', formUuid: row.id }).then(
				({ data }) => {
					if (data?.head?.code == 200) {
						this.allotChecked = data.data.current.map(i => {
							return i.id
						})
						this.allotDisable = data.data.checked.map(i => {
							return i.id
						})
						this.allotPermission = this.addAppAllot(data.data.appMenuList)
						this.allotRow = row
						this.allotDialog = true
					}
				},
			)
		},
		// 递归
		addAppAllot(arr) {
			arr = this._.cloneDeep(arr)
			arr.forEach(i => {
				if (i.menuType != 1 || this.allotDisable.includes(i.id)) {
					i.disabled = true
				}
				if (i.children && Array.isArray(i.children) && i.children.length > 0) {
					i.children = this.addAppAllot(i.children)
				}
			})
			return arr
		},
		addAllot(arr) {
			arr = this._.cloneDeep(arr) || this._.cloneDeep(this.addRoutes)
			arr.forEach(i => {
				if (i.menuType != 2 || this.allotDisable.includes(i.id)) {
					i.disabled = true
				}
				if (i.children && Array.isArray(i.children) && i.children.length > 0) {
					i.children = this.addAllot(i.children)
				}
			})
			return arr
		},
		orgListFun(orgUuid) {
			let value = '-'
			if (this.orgList && this.orgList.length > 0) {
				let orgObj = this.orgList.find(info => info.id == orgUuid)
				value = orgObj ? orgObj.orgName : '-'
			}
			return value
		},
		// getOrgList(param) {
		// 	getOrgList(param).then(({ data }) => {
		// 		if (data?.head?.code == 200) {
		// 			this.orgList = data.data
		// 		}
		// 	})
		// },
		handlerSearch() {
			this.pageConfig.currentPage = 1
			let param = {
				formNameOrInputCode: this.query ? this.query.toUpperCase() : null,
				pageNum: 1,
				pageSize: this.pageConfig.pageSize,
			}
			this.getCustomerFormPageList(param)
		},
		// 翻页事件
		pageChange({ currentPage, pageSize }) {
			this.pageConfig.currentPage = currentPage
			this.pageConfig.pageSize = pageSize
			this.getCustomerFormPageList({
				formName: this.query,
				pageNum: this.pageConfig.currentPage,
				pageSize: this.pageConfig.pageSize,
			})
		},
		getCustomerFormPageList(param) {
			getCustomerFormPageList(param).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.tableData = data.data.records
					this.pageConfig.total = data.data.total
				}
			})
		},
		handlerAddClick() {
			this.dialogVisible = true
			this.dialogType = 1
			this.title = '新增'
			this.formDialog = {
				formJson: null,
				formFile: null,
				whetherEnable: '0',
				type: '0',
				remarks: null,
				formName: null,
				itemName: null,
				itemCode: null,
			}
		},
		handlerSubmit(form, type) {
			if (type == 1) {
				customerFormInset(form).then(async ({ data }) => {
					if (data?.head?.code == 200) {
						this.handlerSearch()
						// console.log(data.data)
						if (data.data.type == 0) {
							let arr = [
								{
									name: form.formName + '-表单设计',
									closable: true,
									isShow: true,
									componentName: 'FormGenerator',
									path: '/setting/formGenerator',
									formInfo: data.data,
								},
							]
							this.ACTION_CHANGE_CURFORMINFO(data.data).then(() => {
								this.$store.commit('common/UPDATE_TABSLIST_FORM', arr)
								this.$nextTick(() => {
									this.$router.push('/setting/formGenerator')
								})
							})
						} else {
							let arr = [
								{
									name: form.formName + '-app表单设计',
									closable: true,
									isShow: true,
									componentName: 'AppFormGenerator',
									path: '/setting/appFormGenerator/' + data.data.id,
									// formInfo: data.data,
								},
							]
							this.$store.commit('common/UPDATE_TABSLIST_FORM', arr)
							this.$nextTick(() => {
								this.$router.push('/setting/appFormGenerator/' + data.data.id)
							})
						}
					}
				})
			} else if (type == 2) {
				customerFormUpdate(form).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.handlerSearch()
						this.$message.success('保存成功')
					}
				})
			}
		},
		handlerEditRow(row) {
			console.log(row, '123')
			this.dialogType = 2
			this.dialogVisible = true
			this.formDialog = { ...row }
		},
		handlerEditForm(id, type) {
			let row = this.tableData.find(i => i.id == id)
			if (row) {
				if (type == 0) {
					let arr = [
						{
							name: row.formName + '-表单设计',
							closable: true,
							isShow: true,
							componentName: 'FormGenerator',
							path: '/setting/formGenerator',
							formGenerator: true,
						},
					]
					// console.log(arr, 33333)
					this.$store.commit('common/UPDATE_TABSLIST_FORM', arr)
					this.$store.commit('common/CHANGE_CURFORMINFO', row)
					this.$router.push('/setting/formGenerator')
				} else {
					let arr = [
						{
							name: row.formName + '-app表单设计',
							closable: true,
							isShow: true,
							componentName: 'AppFormGenerator',
							path: '/setting/appFormGenerator/' + id,
							// formGenerator: true,
						},
					]
					this.$store.commit('common/UPDATE_TABSLIST_FORM', arr)
					this.$router.push('/setting/appFormGenerator/' + id)
				}
			}
		},
		handlerDelRow(row) {
			this.$confirm('此操作将删除该参数, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					customerFormDeletes([row.id]).then(({ data }) => {
						if (data?.head?.code == 200) {
							this.$message.success('删除成功')
							this.getCustomerFormPageList({
								formName: this.query,
								pageNum: this.pageConfig.currentPage,
								pageSize: this.pageConfig.pageSize,
							})
						}
					})
				})
				.catch(() => {})
		},
		handlerAllot(row) {
			this.allotDisable = []
			this.allotPermission = []
			this.allotChecked = []
			if (row.type == '1') {
				// 走APP菜单权限
				this.getAppMenuList(row)
			} else {
				assignPermissionsTree({ menuAssemblyHref: row.id }).then(({ data }) => {
					if (data.head.code == 200) {
						// this.allotChecked = data.data.current
						this.allotChecked = data.data.current.map(i => {
							return i.id
						})
						this.allotDisable = data.data.checked.map(i => {
							return i.id
						})
						this.allotPermission = this.addAllot()
						this.allotRow = row
						this.allotDialog = true
					}
				})
			}
		},
		handerConfirm(row) {
			this.allotDialog = row
		},
	},
}
</script>

<style lang="scss" scoped>
.pageSetting {
	padding: 10px;
	box-sizing: border-box;
	height: 100%;
}
</style>
